<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Film System - Admin</title>
    <link href="css/animate.min.css" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/fontawesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --mac-accent: #0071e3;
            --mac-bg: #f5f5f7;
            --mac-text: #1d1d1f;
            --mac-card-bg: rgba(255, 255, 255, 1);
            --mac-sidebar: rgba(255, 255, 255, 0.3);
            --mac-border-radius: 12px;
            --mac-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
            --mac-danger: #ff3b30;
            --mac-success: #34c759;
            --mac-warning: #ff9500;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        }

        body {
            /* background: url('https://images.unsplash.com/photo-1518709268805-4e9042af2176?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2125&q=80') center/cover fixed; */
            min-height: 100vh;
            padding: 0;
            margin: 0;
            color: var(--mac-text);
            overflow-x: hidden;
        }

        .mac-container {
            display: flex;
            min-height: 100vh;
        }

        .mac-sidebar {
            width: 250px;
            background: var(--mac-sidebar);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            padding: 20px 15px;
            display: flex;
            flex-direction: column;
            border-right: 1px solid rgba(255, 255, 255, 0.2);
            position: fixed;
            height: 100vh;
            z-index: 100;
        }

        .mac-content {
            flex: 1;
            padding: 20px;
            margin-left: 250px;
        }

        .mac-logo {
            text-align: center;
            margin-bottom: 30px;
            padding-top: 20px;
        }

        .mac-logo h3 {
            font-weight: 600;
            font-size: 1.3rem;
            margin-top: 10px;
            background: linear-gradient(90deg, #ff6b6b, #556270);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .mac-nav-item {
            display: flex;
            align-items: center;
            padding: 15px 18px;
            border-radius: var(--mac-border-radius);
            margin-bottom: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            color: var(--mac-text);
            text-decoration: none;
            font-weight: 500;
        }

        .mac-nav-item:hover {
            background: rgba(255, 255, 255, 0.5);
            transform: translateX(5px);
        }

        .mac-nav-item.active {
            background: var(--mac-accent);
            color: white;
            box-shadow: 0 4px 15px rgba(0, 113, 227, 0.3);
        }

        .mac-nav-item i {
            margin-right: 12px;
            font-size: 1.1rem;
            width: 20px;
            text-align: center;
        }

        /* 内容区域切换样式 */
        .content-section {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            opacity: 0;
            visibility: hidden;
            transform: translateY(20px);
            transition: all 0.3s ease;
            pointer-events: none;
        }
        
        .content-section.active {
            position: relative;
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
            pointer-events: auto;
        }

        .admin-header {
            background: var(--mac-card-bg);
            border-radius: var(--mac-border-radius);
            padding: 25px;
            margin-bottom: 25px;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            box-shadow: var(--mac-shadow);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .admin-header h1 {
            font-weight: 700;
            font-size: 2rem;
            margin-bottom: 8px;
            background: linear-gradient(90deg, var(--mac-accent), #5856d6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .admin-header p {
            color: #6e6e73;
            margin: 0;
        }

        .mac-card {
            background: var(--mac-card-bg);
            border-radius: var(--mac-border-radius);
            padding: 25px;
            margin-bottom: 25px;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            box-shadow: var(--mac-shadow);
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: all 0.3s ease;
        }

        .mac-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
        }

        .mac-card h3 {
            font-weight: 600;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
        }

        .mac-card h3 i {
            margin-right: 10px;
            color: var(--mac-accent);
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .stat-card {
            background: var(--mac-card-bg);
            border-radius: var(--mac-border-radius);
            padding: 25px;
            text-align: center;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            box-shadow: var(--mac-shadow);
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: all 0.3s ease;
        }

        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 45px rgba(0, 0, 0, 0.15);
        }

        .stat-icon {
            font-size: 2.5rem;
            margin-bottom: 15px;
        }

        .stat-number {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 8px;
            color: var(--mac-text);
        }

        .stat-label {
            color: #6e6e73;
            font-size: 0.9rem;
            font-weight: 500;
        }

        .mac-form-group {
            margin-bottom: 20px;
        }

        .mac-form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--mac-text);
        }

        .mac-form-control {
            width: 100%;
            padding: 12px 16px;
            border: 2px solid rgba(0, 0, 0, 0.1);
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.8);
            font-size: 0.95rem;
            transition: all 0.3s ease;
            outline: none;
        }

        .mac-form-control:focus {
            border-color: var(--mac-accent);
            box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.1);
            background: white;
        }

        .mac-btn {
            background: var(--mac-accent);
            color: white;
            border: none;
            border-radius: 10px;
            padding: 12px 20px;
            font-size: 0.95rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            text-decoration: none;
        }

        .mac-btn:hover {
            background: #005bb5;
            transform: translateY(-1px);
            box-shadow: 0 8px 25px rgba(0, 113, 227, 0.3);
        }

        .mac-btn.success {
            background: var(--mac-success);
        }

        .mac-btn.success:hover {
            background: #28a745;
            box-shadow: 0 8px 25px rgba(52, 199, 89, 0.3);
        }

        .mac-btn.danger {
            background: var(--mac-danger);
        }

        .mac-btn.danger:hover {
            background: #dc3545;
            box-shadow: 0 8px 25px rgba(255, 59, 48, 0.3);
        }

        .mac-btn.outline {
            background: transparent;
            color: var(--mac-accent);
            border: 2px solid var(--mac-accent);
        }

        .mac-btn.outline:hover {
            background: var(--mac-accent);
            color: white;
        }

        .mac-btn i {
            margin-right: 8px;
        }

        .mac-table {
            width: 100%;
            border-collapse: collapse;
            background: rgba(255, 255, 255, 0.9);
            border-radius: var(--mac-border-radius);
            overflow: hidden;
            box-shadow: var(--mac-shadow);
        }

        .mac-table th {
            background: var(--mac-accent);
            color: white;
            padding: 15px;
            text-align: left;
            font-weight: 600;
        }

        .mac-table td {
            padding: 15px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }

        .mac-table tr:hover {
            background: rgba(0, 113, 227, 0.05);
        }

        .movie-title {
            font-weight: 600;
            color: var(--mac-text);
        }

        .movie-director {
            color: #6e6e73;
        }

        .movie-price {
            font-weight: 600;
            color: var(--mac-success);
        }

        .empty-state {
            text-align: center;
            padding: 40px;
            color: #6e6e73;
        }

        .empty-state i {
            font-size: 3rem;
            margin-bottom: 15px;
            opacity: 0.5;
        }

        .empty-state p {
            font-size: 1.1rem;
            margin: 0;
        }

        .table-responsive {
            border-radius: var(--mac-border-radius);
            overflow: hidden;
        }

        .fade-in {
            animation: fadeIn 0.8s ease-out;
        }

        .slide-up {
            animation: slideUp 0.8s ease-out;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .success-message {
            position: fixed;
            top: 20px;
            right: 20px;
            background: var(--mac-success);
            color: white;
            padding: 15px 20px;
            border-radius: var(--mac-border-radius);
            box-shadow: var(--mac-shadow);
            z-index: 1000;
            transform: translateX(400px);
            transition: all 0.4s ease;
        }

        .success-message.show {
            transform: translateX(0);
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .mac-sidebar {
                width: 200px;
            }

            .mac-content {
                margin-left: 200px;
                padding: 15px;
            }

            .stats-grid {
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                gap: 15px;
            }
        }

        @media (max-width: 576px) {
            .mac-sidebar {
                width: 100%;
                position: relative;
                height: auto;
            }

            .mac-content {
                margin-left: 0;
                padding: 10px;
            }

            .stats-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>

<body>
    <div class="mac-container">
        <!-- 侧边栏导航 -->
        <div class="mac-sidebar">
            <div class="mac-logo">
                <i class="fas fa-crown fa-2x" style="color: #ff6b6b;"></i>
                <h3>管理员控制台</h3>
            </div>

            <div class="mac-nav-item active" data-section="dashboard">
                <i class="fas fa-tachometer-alt"></i>
                <span class="mac-nav-text">仪表盘</span>
            </div>

            <div class="mac-nav-item" data-section="movies">
                <i class="fas fa-film"></i>
                <span class="mac-nav-text">电影管理</span>
            </div>

            <div class="mac-nav-item" data-section="screenings">
                <i class="fas fa-calendar-alt"></i>
                <span class="mac-nav-text">场次管理</span>
            </div>

            <div class="mac-nav-item" data-section="orders">
                <i class="fas fa-ticket-alt"></i>
                <span class="mac-nav-text">订单管理</span>
            </div>

            <div class="mac-nav-item" style="margin-top: auto;" onclick="logout()">
                <i class="fas fa-sign-out-alt"></i>
                <span class="mac-nav-text">退出登录</span>
            </div>
        </div>

        <!-- 主要内容区域 -->
        <div class="mac-content">
            <!-- 仪表盘部分 -->
            <div id="dashboard-section" class="content-section active">
                <div class="admin-header fade-in">
                    <h1>仪表盘</h1>
                    <p>查看系统概览和关键统计数据</p>
                </div>

                <!-- 统计卡片 -->
                <div class="stats-grid fade-in">
                    <div class="stat-card">
                        <div class="stat-icon" style="color: var(--mac-accent);">
                            <i class="fas fa-film"></i>
                        </div>
                        <div class="stat-number" id="dashboardTotalMovies">0</div>
                        <div class="stat-label">总电影数</div>
                    </div>

                    <div class="stat-card">
                        <div class="stat-icon" style="color: var(--mac-success);">
                            <i class="fas fa-ticket-alt"></i>
                        </div>
                        <div class="stat-number" id="dashboardTotalOrders">0</div>
                        <div class="stat-label">总订单数</div>
                    </div>

                    <div class="stat-card">
                        <div class="stat-icon" style="color: var(--mac-warning);">
                            <i class="fas fa-calendar-check"></i>
                        </div>
                        <div class="stat-number" id="dashboardTodayOrders">0</div>
                        <div class="stat-label">今日订单</div>
                    </div>

                    <div class="stat-card">
                        <div class="stat-icon" style="color: var(--mac-danger);">
                            <i class="fas fa-chart-line"></i>
                        </div>
                        <div class="stat-number" id="dashboardTotalRevenue">￥0</div>
                        <div class="stat-label">总收入</div>
                    </div>
                </div>
            </div>

            <!-- 电影管理部分 -->
            <div id="movies-section" class="content-section">
                <div class="admin-header fade-in">
                    <h1>电影管理</h1>
                    <p>管理电影信息，添加新电影，查看电影列表</p>
                </div>

                <!-- 添加电影表单 -->
                <div class="mac-card slide-up">
                    <h3><i class="fas fa-plus-circle"></i>添加新电影</h3>
                    <form id="movieForm">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="mac-form-group">
                                    <label class="mac-form-label">电影名称</label>
                                    <input type="text" class="mac-form-control" id="title" placeholder="请输入电影名称">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mac-form-group">
                                    <label class="mac-form-label">导演</label>
                                    <input type="text" class="mac-form-control" id="director" placeholder="请输入导演姓名">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mac-form-group">
                                    <label class="mac-form-label">票价 (￥)</label>
                                    <input type="number" class="mac-form-control" id="price" placeholder="请输入票价">
                                </div>
                            </div>
                        </div>
                        <div class="text-end">
                            <button type="button" class="mac-btn outline me-2" onclick="resetForm()">
                                <i class="fas fa-undo"></i> 重置
                            </button>
                            <button type="button" class="mac-btn success" onclick="addMovie()">
                                <i class="fas fa-plus"></i> 添加电影
                            </button>
                        </div>
                    </form>
                </div>

                <!-- 电影列表 -->
                <div class="mac-card slide-up">
                    <h3><i class="fas fa-list"></i>电影列表</h3>
                    <div class="table-responsive">
                        <table class="mac-table">
                            <thead>
                                <tr>
                                    <th>电影名称</th>
                                    <th>导演</th>
                                    <th>票价</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="movieList">
                                <!-- 电影数据将通过JavaScript动态加载 -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- 场次管理部分 -->
            <div id="screenings-section" class="content-section">
                <!-- 页面标题 -->
                <div class="admin-header fade-in">
                    <h1>场次管理</h1>
                    <p>安排电影放映场次，管理影厅时间表</p>
                </div>

                <!-- 添加场次表单 -->
                <div class="mac-card slide-up">
                    <h3><i class="fas fa-plus-circle"></i>添加新场次</h3>
                    <form id="screeningForm">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="mac-form-group">
                                    <label class="mac-form-label">选择电影</label>
                                    <select class="mac-form-control" id="movieSelect">
                                        <option value="">请选择电影</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="mac-form-group">
                                    <label class="mac-form-label">影厅</label>
                                    <select class="mac-form-control" id="hallSelect">
                                        <option value="1">1号厅</option>
                                        <option value="2">2号厅</option>
                                        <option value="3">3号厅</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="mac-form-group">
                                    <label class="mac-form-label">放映时间</label>
                                    <input type="datetime-local" class="mac-form-control" id="screeningTime">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="mac-form-group">
                                    <label class="mac-form-label">票价 (￥)</label>
                                    <input type="number" class="mac-form-control" id="screeningPrice"
                                        placeholder="请输入票价" step="0.01">
                                </div>
                            </div>
                        </div>
                        <div class="text-end">
                            <button type="button" class="mac-btn outline me-2" onclick="resetScreeningForm()">
                                <i class="fas fa-undo"></i> 重置
                            </button>
                            <button type="button" class="mac-btn success" onclick="addScreening()">
                                <i class="fas fa-plus"></i> 添加场次
                            </button>
                        </div>
                    </form>
                </div>

                <!-- 场次列表 -->
                <div class="mac-card slide-up">
                    <h3><i class="fas fa-list"></i>场次列表</h3>
                    <div class="table-responsive">
                        <table class="mac-table">
                            <thead>
                                <tr>
                                    <th>电影名称</th>
                                    <th>影厅</th>
                                    <th>放映时间</th>
                                    <th>票价</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="screeningList">
                                <!-- 场次数据将通过JavaScript动态加载 -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- 订单管理部分 -->
            <div id="orders-section" class="content-section">
                <!-- 订单管理内容 -->
                <div class="admin-header fade-in">
                    <h1>订单管理</h1>
                    <p>查看和管理所有订单信息</p>
                </div>

                <div class="mac-card slide-up">
                    <h3><i class="fas fa-list"></i>订单列表</h3>
                    <div class="empty-state">
                        <i class="fas fa-ticket-alt"></i>
                        <p>订单管理功能开发中...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 成功提示消息 -->
    <div id="successMessage" class="success-message">
        <i class="fas fa-check-circle me-2"></i>
        <span id="messageText">操作成功！</span>
    </div>

    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/gsap.min.js"></script>
    <script>
        let movieCount = 0;
        let currentMovies = []; // 存储当前电影列表

        // 页面切换功能
        function switchSection(sectionId) {
            // 移除所有导航项的active状态
            document.querySelectorAll('.mac-nav-item').forEach(item => {
                item.classList.remove('active');
            });
            
            // 激活对应的导航项
            const targetNav = document.querySelector(`[data-section="${sectionId}"]`);
            if (targetNav) {
                targetNav.classList.add('active');
            }
            
            // 隐藏所有内容区域
            document.querySelectorAll('.content-section').forEach(section => {
                section.classList.remove('active');
            });
            
            // 延迟显示目标内容区域，确保动画流畅
            setTimeout(() => {
                const targetSection = document.getElementById(sectionId + '-section');
                if (targetSection) {
                    targetSection.classList.add('active');
                    
                    // 根据切换的页面加载相应数据
                    switch(sectionId) {
                        case 'dashboard':
                            loadDashboardData();
                            break;
                        case 'movies':
                            loadMovies();
                            break;
                        case 'screenings':
                            loadMoviesForSelect();
                            loadScreenings();
                            break;
                        case 'orders':
                            // 订单管理功能待开发
                            break;
                    }
                }
            }, 50);
        }

        // 获取真实统计数据
        function loadRealStatistics() {
            fetch('/order/statistics')
                .then(response => response.json())
                .then(data => {
                    updateStatisticsDisplay(data);
                })
                .catch(error => {
                    console.error('获取统计数据失败:', error);
                    // 如果获取失败，显示默认数据
                    updateStatisticsDisplay({
                        totalOrders: 0,
                        paidOrders: 0,
                        unpaidOrders: 0,
                        totalRevenue: 0,
                        todayRevenue: 0,
                        todayOrders: 0,
                        totalUsers: 0,
                        totalSeats: 0
                    });
                });
        }

        // 更新统计数据显示
        function updateStatisticsDisplay(statistics) {
            // 更新仪表盘统计数据
            const dashboardTotalOrders = document.getElementById('dashboardTotalOrders');
            const dashboardTotalRevenue = document.getElementById('dashboardTotalRevenue');
            const dashboardTodayOrders = document.getElementById('dashboardTodayOrders');
            const dashboardTotalMovies = document.getElementById('dashboardTotalMovies');

            if (dashboardTotalOrders) {
                animateNumber(dashboardTotalOrders, statistics.totalOrders || 0);
            }
            if (dashboardTotalRevenue) {
                animateNumber(dashboardTotalRevenue, statistics.totalRevenue || 0, '¥');
            }
            if (dashboardTodayOrders) {
                animateNumber(dashboardTodayOrders, statistics.todayOrders || 0);
            }
            if (dashboardTotalMovies) {
                animateNumber(dashboardTotalMovies, movieCount);
            }
        }

        // 数字动画效果
        function animateNumber(element, targetValue, prefix = '') {
            const startValue = 0;
            const duration = 1500;
            const startTime = performance.now();

            function updateNumber(currentTime) {
                const elapsed = currentTime - startTime;
                const progress = Math.min(elapsed / duration, 1);

                // 使用缓动函数
                const easeOutQuart = 1 - Math.pow(1 - progress, 4);
                const currentValue = startValue + (targetValue - startValue) * easeOutQuart;

                if (prefix === '¥') {
                    element.textContent = prefix + Math.floor(currentValue).toLocaleString();
                } else {
                    element.textContent = Math.floor(currentValue).toLocaleString();
                }

                if (progress < 1) {
                    requestAnimationFrame(updateNumber);
                }
            }

            requestAnimationFrame(updateNumber);
        }

        // 加载仪表盘数据
        function loadDashboardData() {
            loadRealStatistics();
            // 更新电影数量
            const dashboardTotalMovies = document.getElementById('dashboardTotalMovies');
            if (dashboardTotalMovies) {
                animateNumber(dashboardTotalMovies, movieCount);
            }
        }

        // 显示成功消息
        function showSuccessMessage(message) {
            const messageEl = document.getElementById('successMessage');
            const textEl = document.getElementById('messageText');
            textEl.textContent = message;
            messageEl.classList.add('show');

            setTimeout(() => {
                messageEl.classList.remove('show');
            }, 3000);
        }

        // 更新统计数据
        function updateStats() {
            // 更新仪表盘的电影数量
            const dashboardTotalMovies = document.getElementById('dashboardTotalMovies');
            if (dashboardTotalMovies) {
                animateNumber(dashboardTotalMovies, movieCount);
            }
        }

        // 加载电影列表
        function loadMovies() {
            fetch('/movie/list')
                .then(response => response.json())
                .then(data => {
                    currentMovies = data; // 保存电影列表
                    const movieList = document.getElementById('movieList');
                    movieList.innerHTML = '';
                    movieCount = data.length;
                    updateStats();

                    if (data.length === 0) {
                        movieList.innerHTML = `
                                <tr>
                                    <td colspan="4">
                                        <div class="empty-state">
                                            <i class="fas fa-film"></i>
                                            <p>暂无电影数据</p>
                                        </div>
                                    </td>
                                </tr>
                            `;
                        return;
                    }

                    data.forEach((movie, index) => {
                        const row = document.createElement('tr');
                        row.innerHTML = `
                                <td>
                                    <div class="movie-title">${movie.title}</div>
                                </td>
                                <td>
                                    <div class="movie-director">${movie.director}</div>
                                </td>
                                <td>
                                    <div class="movie-price">￥${movie.price}</div>
                                </td>
                                <td>
                                    <button class="mac-btn danger" onclick="deleteMovie(${movie.id})">
                                        <i class="fas fa-trash"></i> 删除
                                    </button>
                                </td>
                            `;

                        // 添加行动画
                        gsap.from(row, {
                            x: -50,
                            opacity: 0,
                            duration: 0.5,
                            delay: index * 0.1,
                            ease: "power2.out"
                        });

                        movieList.appendChild(row);
                    });
                })
                .catch(error => {
                    console.error('Error loading movies:', error);
                    showSuccessMessage('加载电影列表失败');
                });
        }

        // 为场次管理加载电影下拉列表
        function loadMoviesForSelect() {
            fetch('/movie/list')
                .then(response => response.json())
                .then(data => {
                    const movieSelect = document.getElementById('movieSelect');
                    movieSelect.innerHTML = '<option value="">请选择电影</option>';

                    data.forEach(movie => {
                        const option = document.createElement('option');
                        option.value = movie.id;
                        option.textContent = movie.title;
                        movieSelect.appendChild(option);
                    });
                })
                .catch(error => {
                    console.error('Error loading movies for select:', error);
                    showSuccessMessage('加载电影列表失败');
                });
        }

        // 加载场次列表
        function loadScreenings() {
            fetch('/screening/list')
                .then(response => response.json())
                .then(screenings => {
                    const screeningList = document.getElementById('screeningList');
                    screeningList.innerHTML = '';
                    
                    if (screenings.length === 0) {
                        screeningList.innerHTML = `
                            <tr>
                                <td colspan="5" style="text-align: center; color: #666; padding: 20px;">
                                    暂无场次信息
                                </td>
                            </tr>
                        `;
                        return;
                    }
                    
                    screenings.forEach(screening => {
                        const row = document.createElement('tr');
                        row.innerHTML = `
                            <td>
                                <div class="movie-title">${screening.movie ? screening.movie.title : '未知电影'}</div>
                            </td>
                            <td>
                                <div>${screening.hallId}号厅</div>
                            </td>
                            <td>
                                <div>${formatDateTime(screening.screeningTime)}</div>
                            </td>
                            <td>
                                <div>¥${screening.price}</div>
                            </td>
                            <td>
                                <button class="btn btn-danger btn-sm" onclick="deleteScreening(${screening.id})">
                                    删除
                                </button>
                            </td>
                        `;
                        screeningList.appendChild(row);
                    });
                })
                .catch(error => {
                    console.error('加载场次失败:', error);
                    const screeningList = document.getElementById('screeningList');
                    screeningList.innerHTML = `
                        <tr>
                            <td colspan="5" style="text-align: center; color: #f56565; padding: 20px;">
                                加载场次失败，请刷新页面重试
                            </td>
                        </tr>
                    `;
                });
        }

        // 添加场次
        function addScreening() {
            const movieId = document.getElementById('movieSelect').value;
            const hallId = document.getElementById('hallSelect').value;
            const screeningTime = document.getElementById('screeningTime').value;
            const price = document.getElementById('screeningPrice').value;

            // 表单验证
            if (!movieId || !hallId || !screeningTime || !price) {
                alert('请填写完整的场次信息');
                return;
            }

            if (parseFloat(price) <= 0) {
                alert('票价必须大于0');
                return;
            }

            // 验证时间不能是过去时间
            const selectedTime = new Date(screeningTime);
            const now = new Date();
            if (selectedTime <= now) {
                alert('放映时间不能是过去时间');
                return;
            }

            const screening = {
                movieId: parseInt(movieId),
                hallId: parseInt(hallId),
                screeningTime: screeningTime,
                price: parseFloat(price)
            };

            // 添加加载动画
            const addBtn = event.target;
            const originalText = addBtn.innerHTML;
            addBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 添加中...';
            addBtn.disabled = true;

            fetch('/screening/add', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(screening)
            })
                .then(response => response.text())
                .then(result => {
                    if (result === 'success') {
                        showSuccessMessage('场次添加成功！');
                        loadScreenings();
                        resetScreeningForm();
                    } else {
                        alert('添加失败：' + result);
                    }
                })
                .catch(error => {
                    console.error('Error adding screening:', error);
                    alert('添加失败，请检查网络连接');
                })
                .finally(() => {
                    addBtn.innerHTML = originalText;
                    addBtn.disabled = false;
                });
        }

        // 删除场次
        function deleteScreening(id) {
            if (confirm('确定要删除这个场次吗？此操作不可撤销。')) {
                fetch(`/screening/${id}`, {
                    method: 'DELETE'
                })
                    .then(response => response.text())
                    .then(result => {
                        if (result === 'success') {
                            showSuccessMessage('场次删除成功！');
                            loadScreenings();
                        } else {
                            alert('删除失败，请重试');
                        }
                    })
                    .catch(error => {
                        console.error('Error deleting screening:', error);
                        alert('删除失败，请检查网络连接');
                    });
            }
        }

        // 重置场次表单
        function resetScreeningForm() {
            document.getElementById('screeningForm').reset();

            // 添加重置动画
            const inputs = document.querySelectorAll('#screeningForm .mac-form-control');
            inputs.forEach((input, index) => {
                gsap.from(input, {
                    scale: 0.95,
                    duration: 0.2,
                    delay: index * 0.05,
                    ease: "power2.out"
                });
            });
        }

        // 格式化日期时间
        function formatDateTime(dateTimeString) {
            const date = new Date(dateTimeString);
            return date.toLocaleString('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit'
            });
        }

        // 添加电影
        function addMovie() {
            const title = document.getElementById('title').value.trim();
            const director = document.getElementById('director').value.trim();
            const price = document.getElementById('price').value.trim();

            // 表单验证
            if (!title || !director || !price) {
                alert('请填写完整的电影信息');
                return;
            }

            if (parseFloat(price) <= 0) {
                alert('票价必须大于0');
                return;
            }

            const movie = {
                title: title,
                director: director,
                price: parseFloat(price)
            };

            // 添加加载动画
            const addBtn = event.target;
            const originalText = addBtn.innerHTML;
            addBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 添加中...';
            addBtn.disabled = true;

            fetch('/movie/add', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(movie)
            })
                .then(response => response.text())
                .then(result => {
                    if (result === 'success') {
                        showSuccessMessage('电影添加成功！');
                        loadMovies();
                        loadMoviesForSelect(); // 更新场次管理的电影下拉列表
                        resetForm();
                    } else {
                        alert('添加失败，请重试');
                    }
                })
                .catch(error => {
                    console.error('Error adding movie:', error);
                    alert('添加失败，请检查网络连接');
                })
                .finally(() => {
                    addBtn.innerHTML = originalText;
                    addBtn.disabled = false;
                });
        }

        // 删除电影
        function deleteMovie(id) {
            if (confirm('确定要删除这部电影吗？此操作不可撤销。')) {
                fetch(`/movie/${id}`, {
                    method: 'DELETE'
                })
                    .then(response => response.text())
                    .then(result => {
                        if (result === 'success') {
                            showSuccessMessage('电影删除成功！');
                            loadMovies();
                            loadMoviesForSelect(); // 更新场次管理的电影下拉列表
                        } else {
                            alert('删除失败，请重试');
                        }
                    })
                    .catch(error => {
                        console.error('Error deleting movie:', error);
                        alert('删除失败，请检查网络连接');
                    });
            }
        }

        // 重置表单
        function resetForm() {
            document.getElementById('movieForm').reset();

            // 添加重置动画
            const inputs = document.querySelectorAll('#movieForm .mac-form-control');
            inputs.forEach((input, index) => {
                gsap.from(input, {
                    scale: 0.95,
                    duration: 0.2,
                    delay: index * 0.05,
                    ease: "power2.out"
                });
            });
        }

        // 退出登录
        function logout() {
            if (confirm('确定要退出登录吗？')) {
                window.location.href = 'login.html';
            }
        }

        // 页面加载完成后初始化
        window.onload = function () {
            // 初始化导航点击事件
            document.querySelectorAll('.mac-nav-item[data-section]').forEach(item => {
                item.addEventListener('click', function () {
                    const section = this.getAttribute('data-section');
                    switchSection(section);
                });
            });
            
            // 确保默认显示仪表盘
            setTimeout(() => {
                const dashboardSection = document.getElementById('dashboard-section');
                if (dashboardSection) {
                    dashboardSection.classList.add('active');
                }
                
                // 默认加载仪表盘数据
                loadDashboardData();
                loadMovies(); // 预加载电影数据
                
                // 在内容加载完成后再执行动画
                setTimeout(() => {
                    // 添加页面加载动画
                    gsap.fromTo('.fade-in', 
                        { opacity: 0 },
                        {
                            opacity: 1,
                            duration: 0.8,
                            stagger: 0.2,
                            ease: "power2.out"
                        }
                    );

                    gsap.fromTo('.slide-up',
                        { y: 30, opacity: 0 },
                        {
                            y: 0,
                            opacity: 1,
                            duration: 0.8,
                            delay: 0.3,
                            stagger: 0.2,
                            ease: "power2.out"
                        }
                    );
                }, 200);
            }, 100);

            // 每30秒刷新一次统计数据
            setInterval(loadRealStatistics, 30000);
        };

        // 表单输入动画效果
        document.addEventListener('DOMContentLoaded', function () {
            document.querySelectorAll('.mac-form-control').forEach(input => {
                input.addEventListener('focus', function () {
                    gsap.to(this, {
                        scale: 1.02,
                        duration: 0.2,
                        ease: "power2.out"
                    });
                });

                input.addEventListener('blur', function () {
                    gsap.to(this, {
                        scale: 1,
                        duration: 0.2,
                        ease: "power2.out"
                    });
                });
            });
        });
    </script>
</body>

</html>